<template>
    <view class="content">
        <view class="record-tabs">
            <tab ref="tab" :list="tabList" @tabChange="tabChange" :index="active"></tab>
        </view>

        <view class="record-list">
            <record-item v-for="(item, index) in tabList[active].list" :item="item" :key="item.id" :current="active"></record-item>
            <!-- 商品骨架 -->
            <template v-for="i in ['a', 'b', 'c', 'd']">
                <view class="skeleton-wrap"
                      v-if="tabList[active].list.length === 0 &&
						!tabList[active].finished &&
						!tabList[active].empty"
                >
                    <skeleton class="goods-skeleton" :loading="true" avatarShape="square" :row="3" avatarSize="200rpx"></skeleton>
                </view>
            </template>
        </view>

        <!-- 加载状态 -->
        <view class="load-status">
            <load-more status="loading" color="#c6c6c6" iconType="circle" v-if="!tabList[active].finished && !tabList[active].empty"
                       :contentText="contentText"></load-more>
            <load-more status="noMore" color="#c6c6c6" v-if="tabList[active].finished" :contentText="contentText"></load-more>
            <empty v-if="tabList[active].empty" emptyText="暂无提现记录~" emptyType="cash"></empty>
        </view>

        <!-- 回到顶部 -->
        <u-back-top :scroll-top="scrollTop" top="10"></u-back-top>
    </view>
</template>

<script>
    import Tab from "@/components/Tab";
    import RecordItem from "@/components/RecordItem";
    import Empty from "@/components/Empty";
    import Skeleton from '@/components/uni/Skeleton';
    import LoadMore from "@/components/uni/LoadMore";
    import loader from '@/utils/mixin/loader';
    export default {
        name: "orderList",
        mixins: [loader],
        components: {
            Tab,
			RecordItem,
            Empty,
            Skeleton,
            LoadMore,
        },
        onLoad(options) {
			let tabList = [
				{
					label: '提现明细'
				},
			]
			
			tabList.forEach(item => {
			    item.loading = false;
			    item.finished = false;
			    item.error = false;
			    item.empty = false;
			    item.page = 1;
			    item.list = [];
			});
			
			this.tabList[0].label = '资金明细';
			
			this.tabList = this.tabList.concat(tabList);
			
            if (options.type) {
				this.active = parseInt(options.type);
				this.onRefresh(this.tabList[this.active]);
			} else {
				this.initPage();
			}
        },
        onShow() {
            // #ifdef MP-WEIXIN
            uni.reportAnalytics('enter_zhanghumx');
            // #endif
        },
        methods: {
            initPage() {
				this.loadMore(this.tabList[this.active]);
            },
            // 加载前参数处理
            beforeLoader(item) {
				// 根据tab选择切换接口
				if (this.active === 0) {
					this.service = this.$service.order.consumeLogs.page(this.params);
				} else {
					this.service = this.$service.order.withdraw.page(this.params);
				}
                return true;
            }
        }
    }
</script>

<style lang="scss" scoped>
.content {
	.record-list {
        margin-top: 10rpx;
		background: #fff;
		.skeleton-wrap {
			background: #fff;
			border-bottom: 1rpx solid #E8E8E8;
			&:last-child {
				border-bottom: none;
			}
		}
	}
}
/deep/.u-tabs {
	position: relative;
	.u-tab-item {
		position: relative;
		z-index: 2;
	}
	.u-tab-bar {
		height: 14rpx!important;
		width: 120rpx!important;
		margin-left: -40rpx;
		bottom: 10rpx;
		z-index: 1;
	}
}
</style>